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1. CSS 


O que é CSS? 

O CSS formata a informagäo entregue pelo HTML. Essa informagäo pode ser qualquer coisa: ima- 
gem, texto, video, audio ou qualquer outro elemento criado. Grave isso: CSS formata a informação. 
Essa formatacáo na maioria das vezes é visual, mas náo necessariamente. No CSS Aural, nós ma- 
nipulamos o áudio entregue ao visitante pelo sistema de leitura de tela. Nós controlamos volume, 
profundidade, tipo da voz ou em qual das caixas de som a voz sairá. De certa forma vocé está for- 
matando a informagäo que está em formato de audio e que o visitante está consumindo ao entrar 
no site utilizando um dispositivo ou um sistema de leitura de tela. O CSS prepara essa informação 


para que ela seja consumida da melhor maneira possível. 


O HTMIS trouxe poucas novidades para os desenvolvedores client-side. Basicamente foram cria- 
das novas tags, o significado de algumas foi modificado e outras tags foram descontinuadas. As no- 
vidades interessantes mesmo ficaram para o pessoal que conhece Javascript. As APIs que o HTML5 
disponibilizou sáo sem dúvida uma das features mais aguardadas por todos estes desenvolvedores. 
Diferentemente do CSS3 que trouxe mudanças drásticas para a manipulação visual dos elementos 


do HTML. 


Com o CSS que nós conhecemos podemos formatar algumas características básicas: cores, back- 
ground, características de font, margins, paddings, posigáo e controlamos de uma maneira muito 


artesanal e simples a estrutura do site com a propriedade float. 


Vocé deve pensar: “mas com todas as características nós conseguimos fazer sites fantásticos, com 
design atraente e com a manutengäo relativamente simples”. E eu concordo com vocé, mas outras 


características que nós náo temos controles e dependemos de: 
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1) Algum programa visual como o Photoshop para criarmos detalhes de layout; 


2) Javascript para tratarmos comportamentos ou manipularmos elementos específicos na es- 


trutura do HTML; 


3) Estrutura e controle dos elementos para melhorarmos acessibilidade e diversos aspectos do 


SEO; 


Com as atualizações do CSS3 e com os browsers atualizando o suporte do CSS2.1, nós entramos em 
patamar onde sem dúvida o CSS é a arma mais poderosa para o designer web. Segue uma pequena 


lista dos principais pontos que podemos controlar nesse novo patamar: 
1) selecionar primeiro e último elemento; 
2) selecionar elementos pares ou ímpares; 
3) selecionarmos elementos específicos de um determinado grupo de elementos; 
4) gradiente em textos e elementos; 
5) bordas arredondadas; 
6) sombras em texto e elementos; 
7) manipulagäo de opacidade; 
8) controle de rotacäo; 
9) controle de perspectiva; 
10) animação; 
11) estruturação independente da posição no código HTML; 


É agora que começa diversão ao formatar sites com CSS. 


2. SELETORES COMPLEXOS 


A sintaxe do CSS é simples: 


seletor { 
propriedade: valor; 


A propriedade é a característica que vocé deseja modificar no elemento. O valor é o valor referente 
a esta característica. Se vocé quer modificar a cor do texto, o valor é um Hexadecimal, RGBA ou até 
mesmo o nome da cor por extenso. Até aqui, nada diferente. Muitas vezes vocé náo precisa apren- 
der do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades 
sáo criadas todos os dias e náo é um ato de heroísmo vocé saber todas as propriedades do CSS e 


seus respectivos valores. 


Os seletores sáo a alma do CSS e vocé precisa dominá-los. É com os seletores que vocé irá escolher 
um determinado elemento dentro todos os outros elementos do site para formatá-lo. Boa parte da 


inteligéncia do CSS está em saber utilizar os seletores de uma maneira eficaz, escalável e inteligente. 


O que é um seletor? 
O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar 


quais elementos de um grupo de elementos seráo formatados. 


Seletores encadeados e seletores agrupados sáo a base do CSS. Vocé os aprende por osmose duran- 
te o dia a dia. Para vocé lembrar o que sáo seletores encadeados e agrupados segue um exemplo 


abaixo: 


Exemplo de seletor encadeado: 
div p strong a { 


color: red; 


} 
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Este seletor formata o link (a), que está dentro de um strong, que está dentro de P e que por sua vez 


está dentro de um DIV. 


Exemplo de seletor agrupado: 


strong, em, span { 
color: red; 


Vocé agrupa elementos separados por virgula para que herdem a mesma formatagäo. 


Estes seletores são para cobrir suas necessidades básicas de formatação de elementos. Eles fazem o 
simples. O que vai fazer você trabalhar menos, escrever menos código CSS e também menos códi- 


go Javascript são os seletores complexos. 


Os seletores complexos selecionam elementos que talvez você precisaria fazer algum script em 
Javascript para poder marcá-lo com uma CLASS ou um ID para então você formatá-lo. Com os 


seletores complexos você consegue formatar elementos que antes eram inalcançáveis. 


Exemplo de funcionamento 
Imagine que você tenha um título (h1) seguido de um parágrafo (p). Você precisa selecionar todos 
os parágrafos que vem depois de um título h1. Com os seletores complexos você fará assim: 


hi +p { 
color:red; 


Esses seletores é um dos mais simples e mais úteis que eu já utilizei em projetos por ai. Nao precisei 
adicionar uma classe com JQuery, náo precisei de manipular o CMS para marcar esse parágrafo, 


náo precisei de nada. Apenas apliquei o seletor. 


Abaixo, veja uma lista de seletores complexos e quais as suas fungöes. Náo colocarei todas as possi- 
bilidades aqui porque podem haver modificações, novos formatos ou outros formatos que podem 


ser descontinuados. Para ter uma lista sempre atualizada, siga o link no final da tabela. 


PADRAO SIGNIFICADO CSS 


elemento[atr-=”x”] Elemento com um atributo cujo valor é uma lista separada por espa- 2 


cos, sendo que um dos valores é “x”. 


elemento[atr"="x”] Elemento com um atributo cujo valor comece exatamente com 3 


® «> 
string x. 


elemento[atr$=”x”] Elemento com um atributo cujo valor termina exatamente com 3 


® cc >” 
string x. 


elemento[atr*=”x”] Elemento com um atributo cujo valor contenha a string “x”. 3 


elemento[atr|=”en”] Um elemento que tem o atributo específico com o valor que é sepa- 2 


rado por hífen começando com EN (da esquerda para direita). 


OY a o a ae a 
elemento:nth- Selecione um objeto N de um determinado elemento. 3 
child(n) 


elemento:nth-last- Seleciona um objeto N começando pelo último objeto do elemento. 3 


child(n) 


elemento:enabled Seleciona um elemento de interface que esteja habilitado ou desabi- 3 


elemento:disabled lidade, como selects, checkbox, radio button etc. 


elemento:checked Seleciona elementos que estão checados, como radio buttons e 3 


O E eee OO EEEE A ee 
Ln am Os 
E+F Seleciona um elemento F que precede imediatamente o elemento E. 2 


Lista atualizada pelo W3C http://www.w3.org/TR/css3-selectors/#selectors 
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3. GRADIENTE 


Uma das features mais interessantes é a criação de gradientes apenas utilizando CSS. Todos os 
browsers mais novos como Safari, Opera, Firefox e Chrome já aceitam essa feature e vocé pode 
utilizá-la hoje. Os Internet Explorer atuais (8 e 9) náo reconhecem ainda, contudo vocé poderá 
utilizar imagens para estes browsers que náo aceitam essa feature. Vocé pode perguntar: “Mas já 
que terei o trabalho de produzir a imagem do gradiente, porque náo utilizar imagens para todos os 
browsers?* Lembre-se que se utilizar uma imagem, o browser fará uma requisigáo no servidor bus- 
cando essa imagem, sem imagem, teremos uma requisigäo a menos, logo o site fica um pouquinho 
mais rápido. Multiplique isso para todas as imagens de gradiente que vocé fizer e tudo realmente 


fará mais sentido. 
Deixe para que os browsers não adeptos baixem imagens e façam mais requisições. 


Veja abaixo um exemplo de código, juntamente com o fallback de imagem: 


div { 
width:200px; 
height :200px; 
background-color: #FFF; 


/* imagem caso o browser näo aceite a feature */ 
background-image: url(images/gradiente.png); 


/* Firefox 3.60% */ 
background-image: -moz-linear-gradient (green, red); 


/* Safari 5.1+, Chrome 10+ */ 
background-image: -webkit-linear-gradient (green, red); 


/* Opera 11.10+ */ 
background-image: -o-linear-gradient (green, red); 


Atenção: Até que os browsers implementem de vez essa feature, iremos utilizar seus prefixos. 
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Como ficou: 


“Stops” ou definindo o tamanho do seu gradiente 
O padráo é que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas 


vezes queremos fazer apenas um detalhe. 


Nesse caso nós temos que definir um STOP, para que o browser saiba onde uma cor deve terminar 
para comegar a outra. Perceba o 20% ao lado da cor vermelha. O browser calcula quanto é 20% da 
altura (ou largura dependendo do caso) do elemento, e começa o gradiente da cor exatamente ali. 
O código de exemplo segue abaixo: 


/* Firefox 3.064 */ 
background-image: -moz-linear-gradient (green, red 20%); 


/* Safari 5.1+, Chrome 10+ */ 
background-image: -webkit-linear-gradient (green, red 20%); 


/* Opera 11.10+ */ 
background-image: -o-linear-gradient (green, red 20%); 


Veja o resultado: 


Se colocarmos um valor para o verde, nós iremos conseguir efeitos que antes só conseguiríamos no 


Illustrator ou no Photoshop. Segue o código e o resultado logo após: 


/* Firefox 3.0) */ 
background-image: -moz-linear-gradient (green 10%, red 20%); 


/* Safari 5.1+, Chrome 10+ */ 
background-image: -webkit-linear-gradient (green 10%, red 


/* Opera 11.10+ */ 
background-image: -o-linear-gradient (green 10%, red 20%); 


Perceba que o tamanho da transigäo vai ficando menor a medida que vamos aumentando as por- 


centagens. Muito, mas muito útil. 
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4. COLUMNS 


Com o controle de colunas no CSS, podemos definir colunas de texto de forma automática. Até 
hoje náo havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades 


columns pode fazer isso de maneira livre de gambiarras. 


column-count 
A propriedade column-count define a quantidade de colunas terá o bloco de textos. 


/* Define a quantidade de colunas, a largura é definida uniforme- 
mente. */ 
-moz-column-count: 2; 
-webkit-column-count: 2; 


column-width 
Com a propriedade column-width definimos a largura destas colunas. 


/* Define qual a largura mínima para as colunas. Se as colunas 
forem espremidas, fazendo com que a largura delas fique menor que 
este valor, elas se transformam em 1 coluna automaticamente */ 
-moz-column-width: 400px; 


-webkit-column-width: 400px; 


Fiz alguns testes aqui e há uma diferenga entre o Firefox 3.5 e o Safari 4 (Public Beta). 


O column-width define a largura minima das colunas. Na documentação do W3C é a seguinte: 
imagine que você tenha uma área disponível para as colunas de 100px. Ou seja, você tem um div 
com 100px de largura (width). E você define que as larguras destas colunas (column-width) sejam 
de 45px. Logo, haverá 10px de sobra, e as colunas irão automaticamente ter 50px de largura, preen- 


chendo este espaço disponível. É esse o comportamento que o Firefox adota. 


Já no Safari, acontece o seguinte: se você define um column-width, as colunas obedecem a esse va- 
lor e não preenchem o espaço disponível, como acontece na explicação do W3C e como acontece 


também no Firefox. Dessa forma faz mais sentido para mim. 
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Como a propriedade náo está 100% aprovada ainda, há tempo para que isso seja modificado no- 
vamente. Talvez a mudanga da nomenclatura da classe para column-min-width ou algo parecida 
venha a calhar, assim, ficamos com os dois resultados citados, que sáo bem úteis para nós de qual- 


quer maneira. 


column-gap 
A propriedade column-gap cria um espago entre as colunas, um gap. 
/* Define o espaco entre as colunas. */ 


-moz-column-gap: 50px; 
-webkit-column-gap: 50px; 


Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades näo funcionam oficialmente em 


nenhum browser. Mas ja podem ser usados em browsers como Firefox e Safari. 


5. TRANSFORM 2D 


A propriedade transform manipula a forma com que o elemento aparecerá na tela. Vocé pode- 
rá manipular sua perspectiva, escala e ángulos. Uma transformação é especificada utilizando a 
propriedade transform. Os browsers que suportam essa propriedade, a suportam com o prefixo 


especificado. 
Os valores possiveis até agora estäo especificados abaixo: 


scale 
O valor scale modificará a dimensáo do elemento. Ele aumentará proporcionalmente o tama- 
nho do elemento levando em consideração o tamanho original do elemento. 


skew 
Skew modificará os ângulos dos elementos. Você pode modificar os ângulos individualmente 
dos eixos X e Y como no código abaixo: 


-webkit-transform: skewY (30deg); 
-webkit-transform: skewX (30deg); 


translation 
O translation moverá o elemento no eixo X e Y. O interessante é que vocé náo precisa se pre- 
ocupar com floats, positions, margins e etc. Se vocé aplica o translation, ele moverá o objeto 
e pronto. 


rotate 
O rotate rotaciona o elemento levando em consideragäo seu ángulo, especialmente quando o 
ángulo é personalizado com o transform-origin. 


CSS Transform na prática 
Veja o código abaixo e seu respectivo resultado: 


img ( 
-webkit-transform: skew(30deg); /* para webkit */ 
-moz-transform: skew(30deg); /* para gecko */ 
-o-transform: skew(30deg); /* para opera */ 
transform: skew(30deg); /* para browsers sem prefixo */ 
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O código acima determina que o ángulo da imagem seja de 30deg. Colocamos um exemplo para 


cada prefixo de browser. Ficando assim: 


Várias transformacóes em um único elemento 


Para utilizarmos vários valores ao mesmo tempo em um mesmo elemento, basta definir vários va- 
lores separando-os com espaços em uma mesma propriedade transform: 


img { 
-webkit-transform: scale(1.5) skew(30deg); /* para webkit */ 


-moz-transform: scale(1.5) skew(30deg); /* para gecko */ 
/* para opera */ 


-o-transform: scale(1.5) skew(30deg); 
transform: scale (1.5) skew(30deg); /* para browsers sem prefi- 
xo */ 


} 


transform-origin 


A propriedade transform-origin define qual o ponto do elemento a transformagäo terá origem. A 


sintaxe é idéntica ao background -position. Observe o código abaixo: 


img { 
-webkit-transform-origin: 10px 10px; /* para webkit */ 
-moz-transform-origin: 10px 10px; /* para webkit */ 
-o-transform-origin: 10px 10px; /* para webkit */ 


/* para webkit */ 


transform-origin: 10px 10px; 


Como padrão as transições sempre acontecem tendo como ponto de âncora o centro do objeto. 


Há algumas situações que pode ser que você queira modificar essa âncora, fazendo com que por 


exemplo, a rotação aconteça em algum dos cantos do elemento. O código de exemplo acima fará 
com que a transformagäo acontega a partir dos 10px do topo no canto esquerdo. Veja a compara- 


cáo entre o padráo e o resultado do código acima. 


A propriedade transform fica mais interessante quando a utilizamos com a propriedade transition, 


onde podemos executar algumas animações básicas manipulando os valores de transformação. 
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6. TRANSICOES E ANIMACOES 


Durante muito tempo o CSS só serviu para pintar quadradinhos e mais nada. Desde quando o 
pessoal do WaSP organizou todo o movimento dos Padróes Web fazendo com que todos os desen- 
volvedores, fabricantes de browsers e até mesmo o W3C acreditassem no poder dos padróes náo 
houve grandes atualizações no CSS. Praticamente formatävamos font, background, cor, tamanhos 


e medidas de distância e posição. 


A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a fungäo que 
o CSS tem perante o HTML acrescentando maneiras de produzirmos animações e transições. Nao 
estou dizendo que você fará animações complicadas, com diversos detalhes técnicos e etc. Para 
esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza faráo 
um trabalho melhor com menos esforgo. Mas é fato que as animagöes via CSS nos ajudará a levar a 


experiéncia do usuário para outro patamar. 


Lembrando que o nível de suporte de algumas dessas técnicas ainda é muito baixo. A propriedade 
transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite con- 
trolar as fases de uma animagäo ainda € muito restrito. Para uma tabela mais atual e detalhada de 
suporte e compatibilidade, faga uma procura no Google. Onde for possível demonstrarei o código 


com o prefixo dos browsers que suportam as propriedades. 


O básico: propriedade transition 
A propriedade transition é praticamente auto-explicativa. Sua sintaxe táo simples que talvez até 
dispense explicações mais elaboradas. Vamos começar com o código abaixo: 

al 


color: white; 
background: gray; 


No código definimos que o link terá sua cor de texto igual a preta e seu background será cinza. 
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O resultado esperado é que ao passar o mouse no link a cor do texto seja modificada, mudando do 
branco para o preto e que a cor de background mude de cinza para vermelho. O código abaixo faz 
exatamente isso: 

a { 


color: white; 
background: gray; 


a:hover { 
color: black; 
background: red; 


O problema é que a transigáo é muito brusca. O browser apenas modifica as características entre os 


dois blocos e pronto. Nao há nenhuma transição suave entre os dois estados. 


Podemos fazer a mudança de um estado para outro utilizando a propriedade transition. Suponha 
que ao passar o mouse, as mudanças acontecessem em um intervalo de meio segundo. Bastaria 
colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as 
características do link com uma pequena transição de meio segundo. O código seria como se segue 
abaixo: 


a:hover { 
color: black; 
background: red; 
-webkit-transition: 0.5s; 


Dessa forma a transicäo apenas acontece quando o hover é ativado. O problema é que ao tirar o 
mouse, o browser volta bruscamente para as características iniciais. Para modificar isso basta inse- 
rir também a propriedade transition no estado inicial. 
at 
color: white; 


background: gray; 
-webkit-transition: 0.5s; 


a:hover { 
color: black; 
background: red; 
-webkit-transition: 0.5s; 


O que a propriedade transition faz é comparar os valores das propriedades em comum entre os dois 
estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando 
há a ativação da função. Esta é uma técnica simples e que serve para manipularmos transições bá- 


sicas como cor, tamanho, posigäo etc. 


Agora suponha que em um bloco há uma determinada propriedade que no outro bloco náo há, 
como no código abaixo: 


a { 
border:lpx solid orange; 
color: white; 
background: gray; 
-webkit-transition: 0.5s; 


a:hover { 
color: black; 
background: red; 
-webkit-transition: 0.5s; 


Nesse caso o browser detecta que hä uma propriedade no primeiro estado, mas näo no segundo, 


por isso ele nao faz a transição desta propriedade, apenas das propriedades em comuns. 
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Abaixo veja o código. copie em um arquivo HTML e veja o efeito: 


<!DOCTYPE html> 


<html lang="pt-br”> 
<head> 
<meta charset="utf-8”> 
<title>CSS Transition</title> 
<style type="text/css” media="screen”> 
al 


color:white; 
background:gray; 
-webkit-transition: 0.5s linear; 


} 

a:hover { 
color:black; 
background:red; 
-webkit-transition: 0.5s linear; 


} 

</style> 
</head> 
<body> 


<a href="#”>Link! Hello World!</a> 


</body> 
</html> 


Propriedade animation e regra keyframe 

A propriedade trasition trabalha de forma muito simples e inflexivel. Vocé praticamente diz para o 
browser qual o valor inicial e o valor final para que ele aplique a transigáo automaticamente, con- 
trolamos praticamente apenas o tempo de execução. Para termos mais controle sobre a animação 


temos a propriedade animation que trabalha juntamente com a rule keyframe. 


Basicamente vocé consegue controlar as características do objeto e suas diversas transformagöes 
definindo fases da animação. Observe o código abaixo e veja seu funcionamento: 
@-webkit-keyframes rodar { 


from { 
-webkit-transform:rotate (Odeg) ; 


} 


to { 


-webkit-transform: rotate (360deg) ; 


O código acima define um valor inicial e um valor final. Agora vamos aplicar esse código a um 


elemento. Minha ideia é fazer um DIV girar. ;-) 


O código HTML até agora é este. Fiz apenas um div e defini este keyframe: 


<!DOCTYPE html> 


<html lang="pt-br”> 
<head> 
<title></title> 
<meta charset="utf-8”> 
<style> 
@-webkit-keyframes rodaroda { 
from { 
-webkit-transform:rotate (Odeg) ; 


-webkit-transform: rotate (360deg) ; 


</style> 
</head> 
<body> 


<div></div> 


</body> 
</html> 


Primeiro você define a função de animação, no caso é o nosso código que define um valor inicial de 
0 graus e um valor final de 360 graus. Agora vamos definir as características deste DIV. 
div { 
width:50px; 
height :50px; 


margin:30% auto 0; 
background:black; 


Nas primeiras linhas defini qual será o estilo do div. Ele terá uma largura e uma altura de 50px. A 
margin de 30% do topo garantirá um espaco entre o objeto e o topo do documento, e background 


preto. 
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A propriedade animation tem uma série de propriedades que podem ser resumidas em um 


shortcode bem simples. Veja a tabela logo a seguir para entender o que cada propriedade significa: 


Propriedade Definicáo 


animation- Define a duração da animação. O valor é declarado em segundos. 
O E EEURI.SAREERR RE RHESIENCHEEENDERENEIER 
animation-timing- Descreve qual será a progressão da animação a cada ciclo de duração. 
function Existem uma série de valores possíveis e que pode ser que o seu navegador 
ainda náo suporte, mas sáo eles: ease, linear, ease-in, ease-out, ease-in-out, 
cubic-bezier(<number>, <number>, <number>, <number>) [, ease, linear, 


ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <num- 


ber>, <number>)]* 


RR O An 
animation- Define o número de vezes que o ciclo deve acontecer. O padráo é um, ou 
interation-count seja, a animação acontece uma vez e para. Pode ser também infinito defi- 

Re TE DO q ee 
animation- Define se a animação irá acontecer ou não no sentido inverso em ciclos 
direction alternados. Ou seja, se a animação está acontecendo no sentido horário, ao 

acabar a animação, o browser faz a mesma animação no elemento, mas no 

ee O a 
animation-play- Define se a animação está acontecendo ou se está pausada. Você poderá por 
state exemplo, via script, pausar a animação se ela estiver acontecendo. Os valo- 

nda res são running OU paused, nun 
animation-delay Define quando a animação irá começar. Ou seja, você define um tempo 


para que a animação inicie. O valor 0, significa que a animação começará 


imediatamente. 


Voltando para o nosso código, vamos aplicar algumas dessas propriedades: 


div { 
width:50px; 
height:50px; 
margin:30% auto 0; 
background:black; 


-webkit-animation-name: rodaroda; 
-webkit-animation-duration: 0.5s; 
-webkit-animation-timing-function: linear; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: alternate; 


Veja que na propriedade animation-name chamamos o mesmo nome que demos na nossa fungáo 
de keyframe logo no começo da explicação. Depois definimos uma duração de ciclo de meio se- 
gundo. Definimos que o comportamento da animagäo será linear, e com a propriedade animation- 
iteration-count definimos que ele girará infinitamente. E por último definimos pelo animation-di- 
rection que a animação deverá ser alternada, ou seja, o DIV girará para um lado, e quando alcançar 


o final da animação, o browser deverá alternar essa animação. 


Podemos melhorar esse código utilizando a versão shortcode, que é mais recomendado. Veja a or- 


dem que devemos escrever as propriedades animation em forma de shortcode: 


animation: [<animation-name> || <animation-duration> || <anima- 
tion-timing-function> || <animation-delay> || <animation-itera- 
tion-count> || <animation-direction>] [, [<animation-name> || 
<animation-duration> || <animation-timing-function> || <anima- 
tion-delay> || <animation-iteration-count> || <animation-direc- 
tion>] ]* 


Aplicando isso ao nosso código: 


div { 
width:50px; 
height:50px; 
margin:30% auto 0; 
background:black; 


-webkit-animation: rodaroda 0.5s linear infinite alternate; 
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Pronto. Agora temos um elemento que gira sem parar, hora para direita hora para esquerda. 


Definindo ciclos 

Nós definimos no keyframe do nosso último exemplo apenas um início e um fim. Mas e se quisés- 
semos que ao chegar na metade da animação o nosso elemento ficasse com o background verme- 
lho? Ou que ele mudasse de tamanho, posição e etc.? É aí onde podemos flexibilizar melhor nosso 
keyframe definindo as fases da animação. Por exemplo, podemos dizer para o elemento ter uma cor 


de background diferente quando a animação chegar aos 10% do ciclo, e assim por diante. 


Veja o exemplo: 


@-webkit-keyframes rodaroda { 


0% { 
-webkit-transform:rotate (Odeg) ; 
} 
50% { 
background:red; 
-webkit-transform:rotate (180deg) ; 
} 
100% { 


-webkit-transform:rotate (360deg); 


Definimos acima que o inicio da animação o elemento começará na posição normal, 0 graus. 


Quando a animagáo chegar aos 50% do ciclo, o elemento deverá ter girado para 180 graus e o ba- 
ckground dele deve ser vermelho. E quando a animagäo chegar a 100% o elemento deve ter girado 
ao todo 360 graus e o background, como náo está sendo definido, volta ao valor padráo, no nosso 


caso black, que foi definido no CSS onde formatamos este DIV. 


Logo nosso elemento girará pra sempre e ficará alternando a cor de fundo de preto para vermelho. 
Fiz um exemplo bem simples modificando apenas o background, mas vocé pode muito bem definir 


um position e modificar os valores de left e top para fazer o elemento se movimentar. 


No exemplo também defini apenas 3 estágios (0%, 50% e 100%) vocé pode definir um maior nú- 


mero de estágios: 5%, 10%, 12%, 16% e etc... Adequando as fases da animagäo ás suas necessidades. 


Há exemplos muito interessantes na internet onde podemos ver todo o poder das animacóes feitas 


pela CSS. Veja o exemplo que fizemos aqui neste texto no endereco: http://migre.me/4ubym 
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7. BORDAS 


Definir imagem para as bordas é uma daquelas propriedades da CSS que vocé se pergunta como 
vivíamos antes de conhecé-la. É muito mais fácil entender testando na prática, por isso sugiro que 
se vocé estiver perto de um computador, faca testes enquanto lé este texto. A explicacäo pode nao 


ser suficiente em algumas partes, mas a prática irá ajudá-lo a entender. 


Esta propriedade ainda está em fase de testes pelos browsers, por isso utilizaremos os prefixos para 
ver os resultados.Utilizarei apenas o prefixo do Safari, mas o Firefox já entende essa propriedade 


muito bem. 


A sintaxe do border-image se divide em trés partes: 1) URL da imagem que será utilizada. 2) 


Tamanho do slice das bordas. 3) Como o browser irá aplicar a imagem na borda. 


Segue um exemplo da sintaxe abaixo: 


al 
display:block; 
width:100px; 
webkit-border-image: url (border.gif) 10 10 10 10 stretch; 


Acima definimos uma imagem com o nome de border.gif, logo depois definimos o width de cada 
uma das bordas do elemento. A sintaxe é igual a outras propriedades com 4 valores: top, right, bot- 


tom, left. E logo depois colocamos qual o tipo de tratamento que a imagem vai receber. 


Dividindo a imagem 


Para posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 seções: 


1 2 3 
+ 5 6 
7 8 9 
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Quando a imagem é colocada no elemento, o browser posiciona os cantos da imagem juntamente 
com os cantos correspondentes do elemento. Ou seja, o bloco 1 da imagem é colocado no canto 
superior esquerdo, o 3 no canto superior direito e assim por diante. Se vocé fizer o teste, a imagem 
aparecerá no elemento como se estivesse desproporcional. Isso é normal porque a imagem deve 


seguir as proporções do elemento e não as suas próprias. 


Comportamento da imagem 

O comportamento da imagem é a parte mais importante porque define como o centro da imagem 
(no caso do nosso exemplo a seção de número 5), irá ser tratada. Há vários valores, mas que é mais 
simples de se entender é a stretch, que estica e escala a imagem para o tamanho do elemento aplica- 
do. Há outros valores como round e repeat. Mas hoje alguns browsers não tem tanto suporte e aca- 
bam ou ignorando esses valores ou como no caso do Safari e o Chrome, interpretam o round como 


o repeat. Vamos nos concentrar com o stretch e você entenderá como funciona a propriedade. 


Aplicação 
Vamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer um botão ao estilo iPho- 
ne. A coisa é simples e sugiro que você faça testes individualmente brincando com os valores das 


bordas e com diversas outras imagens para ver como funciona o recurso. 


Irei aplicar o estilo em um link. O código que irei aplicar segue abaixo: 


a { 
display:block; 
width: L00px; 
text-align:center; 
font:bold 13px verdana, arial, tahoma, sans-serif; 
text-decoration: none; 
color:black; 


Para inserir a imagem, colocamos as duas linhas abaixo: 


border-width:10px; 
-webkit-border-image: url(button.png) 10 stretch; 


Defini com a primeira linha que a borda teria 10px de largura com a propriedade border-width. Na 
segunda linha define que a imagem utilizada seria a button.png, que as áreas da imagem teriam que 


se estender por 10px, e o valor stretch define que a imagem cobrirá o elemento inteiro, o resultado 


| Botão | 
u 


segue abaixo: 


Para vocé ver como tudo ali € meio estranho. Se eu diminuir o valor de 10 do border-image, que é 


o valor que define quanto a imagem deve se estender nas bordas, veja como fica: 


fl Botao N 


Temos o border-width definindo a largura da borda, mas náo temos nenhum valor dizendo quanto 


dessa largura a imagem deve tomar. 


Os efeitos sáo bem estranhos quando esses valores estáo mal formatados. Por isso, teste na prática 
essa propriedade para que náo haja problemas a implementar em seus projetos. O pulo da gato, 


para mim, é a propriedade border-width. 
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8. MÚLTIPLOS BACKGROUNDS 


Quem nunca teve que criar um background onde havia um gradiente em cima, embaixo e dos 
lados? Vocé sabe que para criar algo parecido vocé náo pode utilizar uma imagem só. A solugáo 
até hoje seria criar 4 elementos divs aninhados (ou seja, um dentro do outro) e aplicar um pedaço 
deste background em cada um destes elementos para dar a sensação de um background único. O 
resultado é interessante mas o meio que isso é feito náo é nada bonito. Vocé era obrigado a declarar 
4 elementos “inúteis* no seu HTML apenas para compensar um efeito visual. A possibilidade de 
atribuirmos múltiplos backgrounds em apenas um elemento é a feature que vai ajudá-lo a náo sujar 


seu código. 


A sintaxe para múltiplos backgrounds é praticamente idéntica a sintaxe para definir um back- 
ground. Segue abaixo um exemplo: 


div { 
width: 600px; 
height:500px; 
background: 
url(imgl.png) top left repeat-X, 
url(img2.png) bottom left repeat-Y; 


Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter ape- 
nas um valor como normalmente fazemos, poderá haver vários, com suas respectivas definigöes de 


posigäo, repeat e attachment (fixed). 
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9. MÓDULO TEMPLATE LAYOUT 


Talvez vocé me chame de louco, mas para mim a parte mais fácil de desenvolver um site com CSS 
é o planejamento e diagramagäo do layout. Coincidentemente é a parte que mais os desenvolvedo- 
res tem problemas crossbrowser ou por falta de recursos mais avangados. Mas se vocé parar para 
pensar, apenas uma propriedade cuida dessa parte, que é a propriedade float. De longe, para mim, 
o float é a propriedade mais importante que há no CSS. Se o IE náo soubesse o que é float, até hoje 
nös náo estaríamos fazendo sites com CSS. O float cuida de toda a diagramagäo do site, desde os 


elementos que definiráo as áreas mestres do site até os pequenos detalhes de imagens e ícones. 


A propriedade float é muito simples de se entender. O problema náo é o funcionamento, mas os 
efeitos que a propriedade float causa nos elementos próximos. Se vocé pede para duas colunas fica- 
rem flutuando a esquerda e outra coluna a direita, o rodapé sobe. Ou se vocé coloca um elemento 
envolvendo outros elementos com float, esse elemento perde a altura. Estes sáo problemas corri- 


queiros que já tem solugöes inteligentes e que náo apresentam chateagöes mais graves. 


Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele 
resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente 
ligado a ordem dos elementos no HTML. Existem técnicas que vocé consegue fazer quase que 
qualquer organizagäo visual sem encostar no código HTML. Mas há outras necessidades que in- 
variavelmente vocé precisará modificar a ordem dos elementos no meio do HTML para que a 
diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde pro- 
gramagäo server-side e até resultados de SEO e acessibilidade. Por isso € interessante que o HTML 
fique organizado de forma que ele supre as necessidades dessas bases. Sua organizagäo visual deve 


ser independente desta organizacáo. 


Tendo em vista estes e outros problemas o W3C criou um novo módulo. Na verdade ele náo é o 
único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questáo é 
chamado de Template Layout. Esse módulo consiste em uma forma de criarmos e organizarmos os 


elementos e informacóes do layout de forma menos espartana e mais flexível. 


CSS - Curso W3C Escritório Brasil 37 


Podemos dividir a construção do layout em duas grandes partes: 1) Definição dos elementos mes- 


tres e grid a ser seguido. 2) Formatagäo de font, cores, background, bordas etc. 


As propriedades nesta especificagäo trabalham associando uma política de layout de um elemento. 
Essa política é chamada de template-based positioning (náo tem nada a ver com a propriedade 
position, pelo contrário é uma alternativa) que dá ao elemento uma grid invisível para alinhar seus 


elementos descendentes. 


Porque o layout deve se adaptar em diferentes janelas e tamanhos de papéis, as colunas e linhas do 


grid deve ser fixas ou flexiveis dependendo do tamanho. 


O W3C mostra alguns casos comuns: 


e Páginas complexas com múltiplas barras de navegação em áreas com posições fixas como 
publicidade, submenus e etc. 

e Formulários complexos, onde o alinhamento de labels e campos podem ser facilmente defi- 
nidos com as propriedades deste módulo com a ajuda das propriedades de margin, padding 
e tables. 

e GUIs, onde botões, toolbars, labels, ícones etc, tem alinhamentos complexos e precisam estar 
sempre alinhados caso o tamanho ou a resolução da tela mudam. 

e Medias que são paginadas, como medias de impressão onde cada página são divididos em 
áreas fixas para conteúdos de gêneros diferentes. 


Template-based positioning são uma alternativa para a propriedade position com o valor abso- 
lute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagra- 
mar layouts utilizando position. Não que seja errado, mas definitivamente não é a melhor for- 
ma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande, 
mas para pequenos detalhes. Usamos position para posicionarmos elementos que não tem rela- 
ção direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o 


position:absolute; irá posicionar o elemento nas coordenadas que você quiser. 


Sintaxe e funcionamento 
O módulo Template Layout basicamente define slots de layout para que vocé encaixe e posicione 
seus elementos. O mapeamento dos slots é feito com duas propriedades que já conhecemos que 


este módulo adiciona mais alguns valores e funcionalidades, sáo as propriedades position e display. 
A propriedade display irá definir como será o Grid. Quantos slots e etc. 
A propriedade position irá posicionar seus elementos nestes slots. 


Veja o código HTML abaixo: 


<div class="geral”> 
<nav class="menu”>...</nav> 
<aside class="menulateral”>...</aside> 
<aside class="publicidade”>...</aside> 
<article class="post”>...</article> 
<footer>...</footer> 

</div> 


Agora iremos definir a posição destes elementos. O código CSS seria assim: 


«geral { 
display: 


M m 


“ocd” 
“eee”; 


ada 


nav.menu {position:a;} 
aside.menulateral (position:b;) 
aside.publicidade (position: d;) 
article.post {position:c;} 
footer {position:e;} 


O funcionamento da propriedade display 
A propriedade display define a organizagäo dos slots. Um slot é um local onde o seu elemento fica- 


rá. Cada elemento fica em um slot. 


Aqui o elemento display trabalha como um table, onde seu conteúdo será colocando em colunas 


e linhas. A única diferença é que o número de linhas e colunas não dependem do conteúdo é fixa 
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pelo valor da propriedade. E a outra principal diferenga € que a ordem dos descendentes no código 


náo importa. 


cc” 


Existem alguns valores para que você trabalhe: letra, @ (arroba) e *” (pronto). 


Cada letra diferente é um slot de conteúdo diferente. O @ define um sinal para um slot padráo. E o 


cc” 


. (ponto) define um espaço em branco. 


Quando repetimos as letras como no exemplo anterior, tanto na horizontal quanto na vertical, é 
formado um slot único que se expande para o tamanho da quantidade de slots. Lembra do colspan 


ou rowspan utilizados na tabela? Pois é, funciona igualzinho. 


Não é possível fazer um slot que não seja retangular ou vários slots com a mesma letra. Um templa- 
te sem letra nenhuma também não é possível. Um template com mais de um @ também é proibido. 


Se houverem esses erros a declaração é ignorada pelo browser. 


Pra definir a altura da linha (row-height) podemos utilizar o valor padrão “auto”, que define altura 
que a altura da linha é feito de acordo com a quantidade de conteúdo no slot. Você pode definir um 
valor fixo para a altura. Não é possível definir um valor negativo. Quando definimos um * (asterís- 


co) para a altura, isso quer dizer que todas as alturas de linha serão iguais. 


A largura da coluna (col-width) é definida com valores fixos, como o row-height. Podemos definir 
também o valor de * que funciona exatamente igual ao altura de linha, mas aplicados a largura da 
coluna. Há dois valores chamados max-content e min-content que fazem com que a largura seja 
determinada de acordo com o conteúdo. Outro valor é o minmax(p,q) que funciona assim: a lar- 
gura das colunas são fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um 
espaço branco (white space) em volta de p e q. Se q > p, então q é ignorado e o minmax(p,q) é trata- 


do como minmax(p,p). O valor fit-content é o equivalente a minmax(min-content, max-content). 


Definindo a largura e altura dos slots 
Para definir a altura dos slots, utilizamos uma sintaxe diretamente na propriedade display. Veja 
abaixo um exemplo de como podemos fazer isso: 


“a a a” /150px 

“vb Cc a” 

“e e e” / 150px 
100px 400px 100px; 


display: 


Formatando de uma maneira que vocé entenda, fica assim: 


display: “a a a” /150px 
“b Cc da” 
“e e e” /150px 
100px 400px 100px; 


Ou seja, a primeira coluna do grid terá 100px de largura, a segunda 400px e a terceira 100px. 


As medidas que coloquei ao lado, iniciando com uma / (barra) definem a altura das linhas. Logo a 


primeira linha terá 150px e a terceira linha também. A linha do meio, como não tem altura definida 


terá a altura de acordo com a quantidade de conteúdo. 


O espaço entre as colunas são definidos com “ 


cc” 


display: “a a a” /150px 
`, . .” /50px 
“b E a” 
“ .” /50px 
“e e e” /150px 
100px 400px 100px; 


(pontos). Veja o exemplo abaixo: 


150px 


| 50px 
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No exemplo acima fiz duas colunas no código compostos por pontos em vez de fazer com letras. 
Isso quer dizer que entre as colunas do grid haverá um espago em branco de 50px de altura. Veja a 


imagem abaixo para entender melhor o código: 


O funcionamento da propriedade position 
O valor da propriedade position especifica qual linha e coluna o elemento será colocado no tem- 
plate. Vocé escreve apenas uma letra por elemento. Vários elementos podem ser colocados em um 


mesmo slot. Logo estes elementos teráo o mesmo valor de position. 


Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O layout é muito simples: 


e navigation Football our Horoscope 


[People like football. ou're going to die (eventually). 


¡Chess 


[There was a brawl at the chess 
[tournament 


Este layout é representado pelo código abaixo. Primeiro o HTML: 


<ul id="nav”> 
<li>navigation</li> 


</ul> 
<div id="content”> 
<div class="module news”> 
<h3>Weather</h3> 
<p>There will be weather</p> 
</div> 
<div class="module sports”> 
<h3>Football</h3> 
<p>People like football.</p> 
</div> 
<div class="module sports”> 
<h3>Chess</h3> 
<p>There was a brawl at the chess tournament</p> 
</div> 
<div class="module personal”> 
<h3>Your Horoscope</h3> 
<p>You’re going to die (eventually) .</p> 
</div> 
<p id="foot”>Copyright some folks</p> 
</div> 


Agora veja o CSS com toda a mágica: 


body { 
display: “a b” 
10em Es 
} 
#nav { 


position: a; 
} 
#content { 
position: b; 
display: 


} 

.module.news {position: c;} 
.module.sports (position: d; } 
.module.personal (position: e; } 
#foot (position: f;) 


Lembre-se que não importa a posição dos elementos no código. E essa é a mágica. Podemos or- 
ganizar o código HTML de acordo com nossas necessidades e levando em consideragäo SEO, 
Acessibilidade e processo de manutenção. O HTML fica totalmente intacto separado de qualquer 


formatagäo. Muito, mas muito interessante. 


Pseudo-elemento ::slot() 

Vocé pode formatar um slot especifico simplesmente declarando-o no CSS. Suponha que vocé 
queira que um determinado slot tenha um fundo diferente, alinhamento e etc... Essa formatagäo 
será aplicada diretamente no slot e náo no elemento que vocé colocou lá. Fica mais simples de se 
formatar porque vocé náo atrela um estilo ao elemento e sim ao slot. Se vocé precisar posicionar 
aquele elemento em outro lugar, vocé consegue facilmente. 


Hr 


body ( display: “aaa 
“bcd” } 

(bo) { background: #FFO } 

(c), body::slot(d) { vertical-align: bottom } 


body::slot 
body::slot 


CSS - Curso W3C Escritório Brasil 43 


As propriedades aplicadas no pseudo elemento slot() seguem abaixo: 


e Todos as propriedades background. 

e vertical-align 

e overflow 

e box-shadow, block-flow e direction ainda estão sendo estudados pelo W3C se elas entrarão 
ou não. 


10. CORES 


RGBA 


Normalmente em web trabalhamos com cores na forma de hexadecimal. É a forma mais comum 
e mais utilizada desde os primórdios do desenvolvimento web. Mesmo assim, há outros formatos 
menos comuns que funcionam sem problemas, um destes formatos é o RGB. O RGB sáo 3 con- 
juntos de números que começam no 0 e vão até 255 (0% até 100%), onde o primeiro bloco define 
a quantidade de vermelho (Red), o segundo bloco a quantidade de verde (Green) e o último bloco 
a quantidade de azul (Blue). A combinagäo destes números formam todas as cores que vocé pode 


imaginar. 


No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor, como: 


color, background, border etc. Exemplo: 


p { 
background: rgb (255,255,0); 
padding: 10px; 
font:13px verdana; 


Este código RGB define que o background o elemento P será amarelo. 


RGBA e a diferenca da propriedade OPACITY 

Até entáo nós só podíamos escrever cores sólidas, sem nem ao menos escolhermos a opacidade 
dessa cor. O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via pro- 
priedade opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que está 
contido nele também fica opaco e náo apenas o background ou a cor dele. Veja o exemplo abaixo 


e compare as imagens. 
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A primeira é a imagem normal, sem a aplicacáo de opacidade: 


UM TEXTO PARA LER! 


Agora com o bloco branco, marcado com um P, com opacidade definida. Perceba que o back- 


ground e também a cor do texto ficaram transparentes. 


Isso é útil mas dificulta muito quando queremos que apenas a cor de fundo de um determinado 
elemento tenha a opacidade modificada. É aí que entra o RGBA. O RGBA funciona da mesma 
forma que o RGB, ou seja, definindo uma cor para a propriedade. No caso do RGBA, além dos 3 
canais RGB (Red, Green e Blue) há um quarto canal, A (Alpha) que controla a opacidade da cor. 
Nesse caso, podemos controlar a opacidade da cor do background sem afetar a opacidade dos ou- 


tros elementos: 


Veja um exemplo de código aplicado abaixo: 


p { 
background: rgba (255,255,0, 0.5); 
padding: 10px; 
font:13px verdana; 


O último valor é referente ao canal Alpha, onde 1 é totalmente visível e 0 é totalmente invisível. No 


exemplo acima está com uma opacidade de 50%. 


currentColor 
O valor currentColor é muito simples de se entender e pode ser muito útil para diminuirmos o 
retrabalho em alguns momentos da produção. Imagine que o currentColor é uma variável cujo seu 
valor é definido pelo valor da propriedade color do seletor. Veja o código abaixo: 
pl 

background: red; 

padding: 10px; 

font:13px verdana; 


color: green; 
border:lpx solid green; 


Note que o valor da propriedade color é igual ao valor da cor da propriedade border. 


Há uma redundáncia de código, que nesse caso é irrelevante, mas quando falamos de dezenas de 


arquivos de CSS modulados, com centenas de linhas cada, essa redundáncia pode incomodar a 
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produtividade. A funcáo do currentColor é simples: ele copia para outras propriedades do mesmo 
seletor o valor da propriedade color. Veja o código abaixo para entender melhor: 
pl 
background: red; 
padding: 10px; 
font:13px verdana; 


color: green; 
border:lpx solid currentColor; 


Veja que apliquei o valor currentColor onde deveria estar o valor de cor da propriedade border. 
Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicará o mesmo 


valor para a propriedade onde ela está sendo aplicada. 


Isso funciona em qualquer propriedade que faça utilização de cor como background, border, etc. 
Obviamente náo funciona para a propriedade color. O currentColor também náo funciona em se- 
letores separados, ou seja, vocé náo consegue atrelar o valor da propriedade color ao currentColor 


de outro seletor. 


11. PAGED MEDIA 


Com certeza vocé já deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu 
imprimir o texto para ler off-line, no papel por ser mais confortável ou por ser mais prático quando 
náo se está conectado. Existem vários motivos para que um leitor queira imprimir o conteúdo de 
um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal mo- 
tivo era que ler na tela do computador era cansativo. Hoje isso ainda é um problema, mas com o 
avanco das telas e do aparecimento das tablets no mercado, vocé consegue passar mais tempo na 
frente de uma tela lendo grandes quantidades de texto. O problema é que geralmente a organização 


de páginas e o conteúdo náo é exatamente confortável para passarmos horas lendo. 


Outro problema comum é que nós desenvolvedores náo temos uma maneira fácil de formatar pági- 
nas. Na verdade temos, mas é um pouco de gambiarra e claro, náo é maneira correta. A especifica- 
ção de Paged Media traz nos possibilita formatar as paginas, transparências (aqueles “plásticos“ que 
usamos com retroprojetores) ou até mesmo páginas que serão vistas pelo monitor. Controlaremos 


suas medidas, tamanhos, margens, quebras de páginas e etc... 


Nota: Para você não se confundir, quando digo páginas, quero dizer páginas físicas, de papel, não 


paginas web, ok? ;-) 


@page 

Definiremos com CSS3 um modelo de pägina que especifica como o documento serä formatado 
em uma área retangular, chamada de page box, com larguras e alturas limitadas. Nem sempre o 
page box tem referéncia correspondente para uma folha de papel física, como normalmente conhe- 
cemos em diversos formatos: folhas, transparências e etc. Esta especificação formata o page box, 
mas é o browser ou o meio de acesso que o usuário está utilizando que tem a responsabilidade de 


transferir o formato do page box para a folha de papel no momento da impressáo. 
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O documento é transferido no modelo da página para um ou mais page boxes. O page box é uma 
caixa retangular que será sua área de impressáo. Isso é como se fosse um viewport do browser. 
Como qualquer outro box, a page box tem margin, border, padding e outras áreas. O conteúdo e as 


áreas de margin do page box tem algumas fungöes especiais: 


A área de conteúdo do page box é chamada de area da página ou page area. O conteúdo do docu- 
mento flui na área de página. Os limites da área da página na primeira página estabelece o retángu- 


lo inicial que contém o bloco do documento. 


A área da margem da page box é dividido em 16 caixas de margem ou margin boxes. Vocé pode 
definir para cada caixa de margem sua própria borda, margem, padding e áreas de conteúdo. 
Normalmente essas caixas de margem sáo usadas para definir headers e footers do documento. 


Confesso que o nome utilizado (caixas de margem) é meio estranho. 


As propriedades do page box sáo determinadas pelas propriedades estabelecidas pelo page context, 
o qual é a regra de CSS @page. Para definir a largura e altura de uma page box náo se usa as pro- 
priedades width e height. O tamanho da page box é especificada utilizando a propriedade size no 


page context. 


Terminologia e Page Model (modelo de página) 
O page box tem algumas áreas simples de se entender que facilitará a explicação. Veja abaixo uma 


imagem e uma explicacáo de suas respectivas áreas: 


Page box 
O page box é onde tudo acontece. Tenha em mente que o page box é o viewport das medias impres- 


sas. É lá que conterá as áreas de margem, padding, border e onde o texto será consumido. 


A largura e altura do page box é determinada pela propriedade size. Em um caso simples, o page 


box tem a largura e a altura de uma folha. Entretanto em casos complexos onde page box difere 


das folhas de papel em valores e orientacóes já que vocé pode personalizar de acordo com sua 


necessidade. 


Page area 


A page area é a area de conteúdo (content area) do page box. 


Margin box 

Margin boxes contém boxes para header e footer. Sao conjunto de 16 boxes onde vocé pode inserir 
conteúdo útil como número da página, título do livro, etc, etc, etc. Essas áreas ficam fora do Page 
area. Cada um tem suas margins, paddings e bordas individuais. Veja o diagrama abaixo para vi- 


sualizar melhor. 


Page sheet 
A folha, a página, a superfície que será impresso o conteúdo. A ilustragäo abaixo mostra a repre- 


sentacáo de uma folha. 


Folha - Página 


Área náo impressa 


' Área de impressão 
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Non-printable area - Area náo impressa 
A área de náo impressáo é a área onde o dispositivo de impressáo náo é capaz de imprimir. Esta 


área depende do dispositivo que vocé está utilizando. O page box fica dentro da área de impressáo. 


Área de impressáo 

A área impressa é onde o dispositivo de impressáo é capaz de imprimir. A área de impressáo é o 
tamanho da page sheet menos a área de náo impressáo. Como a área de náo impressáo, a área útil 
de impressáo depende muito do dispositivo. O dispositivo pode ajustar o conteúdo para que seja 


impresso sem problemas nessa área. Cada dispositivo tem seu meio de ajuste. 


Propriedade size 
A propriedade size especifica o tamanho e a orientacáo da área do de conteúdo, o page box. O ta- 
manho do page box pode ser definida com valores absolutos (px) ou relativos (%). Vocé pode usar 


trés valores para definir a largura e a orientagäo do page box: 


auto 


O page box irá ter o tamanho e orientagäo do page sheet escolhido pelo usuário. 


landscape 
Define que a página será impressa em modo paisagem. O page box neste caso tem o mesmo ta- 
manho da página, mas o lado maior é o horizontal. Se o tamanho da página náo for definido, o 


tamanho é especificado pelo usuário e seu dispositivo. 


portrait 
Define que a página será impressa em modo retrato. O page box neste caso tem o mesmo tamanho 
da página, mas o lado maior é o vertical. Se o tamanho da página náo for definido, o tamanho é 


especificado pelo usuário e seu dispositivo. 


Veja um exemplo abaixo: 
@page ( 
size: auto; /* auto is the valor padráo */ 


margin: 10%; /* margem */ 


) 


Como nessa caso a margem é variável, ela está sendo relativa às dimensões da página. Logo se a 


página uma A4, com as dimensöes: 210mm x 297mm, as margens seräo 21mm e 29.7mm. 


Outro exemplo: 
@page { 
size: 210mm 297mm; /* definem o page-sheet para um tamanho de A4 
ar, 
} 


Page-size 
O page-size pode ser especificado utilizando um dos media names abaixo. Isso é o equivalente a 
utilizar os valores escritos diretamente na propriedade size. Contudo é muito melhor utilizar o 


nome de um formato de formato de papel. 


Formato Descrição 


AS A A página deve ser definida para o tamanho ISO A5: 148mm x 210mm. | 

AA A página deve ser definida para o tamanho ISO A4: 210 mm x 297 mm. 

A3 sl A página deve ser definida para o tamanho ISO A3: 297mm x 420mm. 

B5 A página deve ser definida para o tamanho ISO B3 media: 176mm x 250mm. 
B4 A página deve ser definida para o tamanho ISO B4: 250mm x 353mm. 


Abaixo veja um exemplo de aplicação: 
@page { 


size: A4 landscape; 


} 
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O W3C tem uma especificação muito extensa que pode ser encontrada aqui: 


http://www.w3.org/TR/css3-page/ 


12. @FONT-FACE 


A regra @font-face é utilizada para que vocé utilize fontes fora do padráo do sistema em seus sites. 
Para que isso funcione, nós disponibilizamos as fontes necessárias em seu servidor e linkamos estas 
fontes no arquivo CSS. A sintaxe é bem simples e tem suporte a todos os navegadores, com algumas 
ressalvas. 


@font-face { 
font-family: helveticaneue; 
src: url (helveticaNeueLTStd-UltLt.otf); 


Na primeira linha você customiza o nome da font que você usará durante todo o projeto. Na segun- 
da linha definimos a URL onde o browser procurará o arquivo da font para baixar e aplicar no site. 
Você aplica a fonte como abaixo: 


p (font:36px helveticaneue, Arial, Tahoma, Sans-serif;) 


Suponha que o usuário tenha a font instalada, logo ele não precisa baixar a font, assim podemos 
indicar para que o browser possa utilizar o arquivo da própria máquina do usuário. Menos requi- 
sições, mais velocidade. Veja o código abaixo: 


@font-face { 

amily: helveticaneue; 

src: local (HelveticaNeueLTStd-UltLt.otf), 
url (HelveticaNeueLTStd-UltLt.otf); 
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Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar: 


Sting aan. Font Format | Common Extensions 
2 e ET bn ern oa 
E SER In A a 
truetype-aat TrueType with Apple Advanced .ttf 

A et ates. Typography extensions co. 

„embedded-opentype Embedded OpenType | |. sc re 
woff WOFF (Web Open Font .woff 

iaa PO cae tinea RR ENTE 
svg SVG Font SVQ, .SV8Z 


Compatibilidade 


As versöes 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Vocé pode 
encontrar qualquer conversor online que esse problema é resolvido. Vocé pode converter suas fon- 
tes para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fontes em 


TTF e Ore 


Para suprir a necessidade de atenção do Internet Explorer, você precisa especificar a URL da font 
.eot para que o Internet Explorer possa aplicar a font corretamente. A sintaxe fica desta forma: 


@font-face { 
font-family: helveticaneue; 
src: url (helveticaNeueLTStd-UltLt.eot); 
src: url (helveticaNeueLTStd-UltLt.otf); 


Kit de sobrevivência 
O Font Squirrel fez um pequeno favor para toda a comunidade. É um sisteminha que con- 
verte suas fontes para os formatos necessários e te devolve para você utilizar em seus sites: 


http://migre.me/4qST9 


13. PRESENTATION-LEVELS 


A informação na web é reutilizada de diversas maneiras. Toda informação publicada é reutilizada 
por diversos meios de acesso, seja o seu browser, leitor de tela ou robós de busca. O HTML propor- 
ciona essa liberdade para a informação. Por ser uma linguagem muito simples, podemos reutilizar 
a informação marcada com HTML em diversos meios de acesso. Mas o HTML não cuida da forma 
com que o usuário vai visualizar a informagáo em seu dispositivo. O HTML apenas exibe a infor- 
magäo. A maneira que o usuario consome essa informagäo é diferente em cada um dos meios de 
acesso e dispositivos. E ai que entra todo o poder do CSS. O CSS formata a informagäo para que 
ela possa ser acessível em diversos usar agents (meios de acesso). Se vocé acessa o site do seu banco 
pelo monitor de 22” da sua casa ou pelo seu celular, a informação tem que aparecer bem organizada 


em ambos cenários. É o CSS que organiza visualmente essas informagöes. 


Além disso podemos apresentar a informação de diversas formas em um mesmo dispositivo. Por 
exemplo: vocé pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das 
fotos ou ver em forma de slideshow. Podemos levar essas experiéncias para websites de conteúdo 
textual também. A especificação de presentation-levels é uma das especificações que levam o usu- 
ário a terem conteúdo mostrados de uma outra forma da qual estamos acostumados. É muito útil 
para apresentacóes de slides, com efeitos, transigóes e etc ou qualquer documento que seria mais 


bem apresentado no formato de apresentacáo, como uma proposta, documentos técnicos e etc. 


Como funciona o modelo 
O modelo por trás da especificagäo é simples. Cada elemento no documento é definido como um 


“elemento de apresentação“ ou no formato original “elements presentation level“ - EPL. 


O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente baseado na posição 
do elemento pela estrutura do documento. É assim que o browser calcula para mostrar os elemen- 


tos progressivamente, como se faz normalmente em programas de apresentacáo. 


CSS - Curso W3C Escritório Brasil 57 


O elemento fica em um dos trés seguintes niveis que também sáo representadas por classes: below- 
level, at-level e above-level. Dependendo da pontuação de EPL que o browser dá, o elemento fica 


em um determinado nível. Essas pseudo-classes podem e devem ser modificadas via CSS. 


A propriedade presentation-level 
A propriedade presentation-level define como os valores de apresentação (EPL) de um determi- 


nado objeto devem ser calculados. Sáo trés valores possíveis: números inteiros, increment e same. 
Quando definimos um valor inteiro, o elemento tem aquele valor fixo. 


Quando colocamos increment, o valor do objeto aumenta um ponto em relação ao objeto anterior. 
Suponha que há duas LI em uma UL. A primeira LI tem o valor de 1, a segunda tem valor de 2 e 


assim por diante. 
Quando definimos o valor same, o browser computa o mesmo valor do objeto anterior. 
Isso tudo vai ficar mais esclarecido com os exemplos a seguir. 


Utilizando o mesmo exemplo da especificagäo do W3C, temos o código abaixo: 


<!DOCTYPE html> 
<html> 
<body> 
<hl>strategies</hl> 
<h2>our strategy</h2> 
<ul> 
<li>divide</li> 
<li>conquer 
<p> (in that order)</p> 
</a> 
</ul> 
<h2>their strategy</h2> 
<ul> 
<li>obfuscate</li> 
<li>propagate</li> 
</ul> 


</body> 
</html> 


(media projection { 


hl { page-break-befor 
li { presentation-] 


evel: 


always } 


:below-level { col 
:at-level { color: 
:above-level { col 


Or: 


black } 


red } 


Or: 


silver } 


Vamos definir o CSS de presentation-levels para esse HTML adicionado o cödigo CSS: 


increment } 


Definimos que o Hl irá sempre iniciar em uma nova página. 


Mas o mais importante é a propriedade presentation-level que definimos para a LI. Isso quer dizer 


que a cada LI o browser contará mais um ponto. 


As três pseudo-classes que falamos no começo do texto: below-level, at-level, above-level, que for- 


mata os elementos que foram mostrados anteriores, o que elemento que está sendo mostrado e o 


próximo elemento. 


Sendo assim, o browser calcula a pontuação de cada um dos elementos utilizados no exemplo 


como mostra abaixo: 


Valor de EPL 
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Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com os valores de EPL: 


<!DOCTYPE html> 
<html> 
<style> 
(media projection { 
hl { presentation-level: 0; } 
h2 { presentation-level: 1; } 
h3 { presentation-level: 2; } 
body * { presentation-level: 3; } 


:above-level { display: none; } 


</style> 
<body> 
<hl>strategies</hl> 
<h2>our strategy</h2> 
<ul> 
<li>divide</li> 
<li>conquer</li> 
</ul> 
<h2>their strategy</h2> 
<ul> 
<li>obfuscate</li> 
<li>propagate</li> 
</ul> 


</body> 
</html> 


Perceba que agora definimos no CSS que tudo dentro de body tem o valor de 3. Logo o Hl que foi 


definido como 0 pela propriedade presentation-level tem o valor de 3. 


Definimos também display:none; para os próximos elementos. Agora veja a pontuacáo aplicada: 


HTML Valor de EPL 


„<hl>strategies</hl> ............. A 
„<h2>our strategy</h2> ee 
A A Di 
id 0... as 
„.Sli>conquer</li> A gen 
| ee ee E er 
„<h2>their strategy</h2> 0 Ya. 
NR ee Te RN 
„„Sli>obfuscate</li> A ER 
_„Sli>propagate</li> nn, Ms 
</ul> 0 


O W3C tem uma especificação completa e em constante atualização do presentation-levels aqui: 


http://www.w3.org/TR/css3-preslev/ 
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